<template>
  <el-row id="progressForProjectInfoContainer">
    <div ref="gantt" class="left-container"></div>

  </el-row>
</template>
<script>
import gantt from 'dhtmlx-gantt' // 引入模块
import { getAction, putAction, postAction } from '@tapui/utils/http'

import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
export default {
  name: 'myGantt',
  components: {
    gantt
  },
  data() {
    return {
      tasks: {
        data: [
          {
            id: 1,
            text: 'Task #1',
            start_date: '15-04-2017',
            personName: '张总',
            duration: 3,
            progress: 0.6
          },
          {
            id: 2,
            text: 'Task #2',
            start_date: '18-04-2017',
            personName: '李总',
            duration: 3,
            progress: 0.4
          },
          {
            id: 3,
            text: 'Task #3',
            start_date: '20-05-2017',
            personName: '赵总',
            duration: 3,
            progress: 0.4
          }
        ],
        links: []
      },
      ownProjectId: '',
      activeName: 'first'
      // projectId1: ''
    }
  },
  props: {
    projectId: Number
  },
  methods: {
    getTaskInfoList() {
      gantt.config.readonly = true
      gantt.i18n.setLocale('cn')
      // 获取任务列表
      getAction('/pm/task/list', { qry_projectid: this.projectId }).then(res => {
        // eslint-disable-next-line no-debugger
        this.$set(this.tasks, 'data', {})
        // 格式化任务列表
        var tasksData = []
        res.result.dataList.forEach(element => {
          var taskTemp = {}
          taskTemp.id = element.id
          taskTemp.text = element.name
          taskTemp.start_date = this.formateForGantt(element.starttime)
          taskTemp.personName = element.leadername
          taskTemp.duration = 10
          taskTemp.progress = element.progress / 100
          tasksData.push(taskTemp)
        })
        this.$set(this.tasks, 'data', tasksData)
        gantt.clearAll()
        gantt.config.date_scale = '%m-%d'
        debugger
        // 进度条上的文字提示
        gantt.templates.task_text = function(start, end, task) {
          return (
            "<b style='text-align:left;'>名称:</b> " +
            task.text +
            "    <span style='text-align:left;'>" +
            '完成度：' +
            Math.round(task.progress * 100) +
            '% </span>'
          )
        }
        // 初始化
        gantt.init(this.$refs.gantt)

        // 数据解析
        gantt.parse(this.$data.tasks)
      })
    },
    initParam() {},
    // 甘特图时间格式化
    formateForGantt(dateStringForGantt) {
      const dateTime = new Date(dateStringForGantt)
      const YY = dateTime.getFullYear()
      const MM =
        dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1
      const D = dateTime.getDate() < 10 ? '0' + dateTime.getDate() : dateTime.getDate()
      return D + '-' + MM + '=' + YY
    }
  },
  mounted() {
    this.getTaskInfoList()
  },
  watch: {
    projectId(newValue, oldValue) {
      this.ownProjectId = newValue
      this.getTaskInfoList()
    }
  }
}
</script>
<style  scoped>
.left-container {
  height: 600px;
}
#progressForProjectInfoContainer >>> .gantt_task_progress {
  background-color: #00cc66;
}
#progressForProjectInfoContainer >>> .gantt_task_line {
  background-color: #909090;
}
</style>
